/*
 * 
 * 	$("#active_edit_element").draggable({ 
	    opacity: 0.70 
	});
	$("#active_edit_element").resizable({ 
		 handles: "all", 
		 ghost: true,
		 autoHide: true 
	});
	$("#active_edit_element").dblclick(function(){
		
		//alert($("#active_edit_element > #html").html());
		$("#active_edit_element > #html").hide();
		$("#active_edit_element > #textarea").show();
		$("#active_edit_element > #control").show();
		//$("#active_edit_element > #textarea").html($("#active_edit_element > #html").html());
		$("#active_edit_element > #textarea").attr("width", $("#active_edit_element").attr("width"));
		
	}); 

	$("#active_edit_element > #textarea").hide();
	$("#active_edit_element > #control").hide();

	$("#div_save").click(function (){
		$("#active_edit_element > #html").html($("#active_edit_element > #textarea #text").attr("value"));
		$("#active_edit_element > #html").show();
		$("#active_edit_element > #textarea").hide();
		$("#active_edit_element > #control").hide();
	});
	
	*
	*
	*
	*/







$(document).ready(function (){
	editor = new Editor("My_Eduvid_Editor");
	editor.init();
});


function Editor(id){
	
	this.name = "Welcome to editor";
	this.Editor_box_id = id ;
	this.slide_class = "slide_inside_editor" ;
	this.Editor_box_left = null ;
	this.Editor_box_top = null ;
	this.Editor_box_width = null ;
	this.Editor_box_height = null ;
	
	this.div_box_number = null ;
	
	this.current_focused_element_id = null ;
	this.new_div_box_x = null ;
	this.new_div_box_y = null ;
	this.new_div_box_width = null ;
	this.new_div_box_height = null ;
	this.new_div_box_bg_color = null ;
	this.current_font_family = null ;
	this.current_font_size = null ;
	
}

Editor.prototype.init = function() {
	var self = this;
	
	if (this.Editor_box_id == null ){
		alert("Div Container for initializing the Eduvid Editor not found");
		return 0;
	}
	this.Editor_box_left = $("#" + this.Editor_box_id).css("left");
	this.Editor_box_top = $("#" + this.Editor_box_id).css("top");
	this.Editor_box_width = $("#" + this.Editor_box_id).css("width");
	this.Editor_box_height = $("#" + this.Editor_box_id).css("height");
	

	this.new_div_box_left = "30%" ;
	this.new_div_box_top = "30%" ;
	this.new_div_box_width = "20%" ;
	this.new_div_box_height = "20%" ;
	this.new_div_box_bg_color = "#D65CAD" ;
	this.div_box_number = 1 ;
	this.create_control();
	
	/*
	$("#"+ self.Editor_box_id ).resizable({ 
		 handles: "all", 
		 ghost: true,
		 autoHide: true,
		 minWidth: 50,
		 minHeight: 50,
		 minTop: 50,
		 minLeft: 50,		  
		 dragHandle: true,

	});*/
	
	$("#slide_inside_editor" ).resizable({ 
		 handles: "all", 
		 ghost: true,
		 autoHide: true,
		 minWidth: 50,
		 minHeight: 50,
		 minTop: 50,
		 minLeft: 50,
		 dragHandle: true,

	});
	
	
}

Editor.prototype.create_control = function() {
	var self = this ;
	$("#" + this.Editor_box_id).append("<span class=\"editor_button\" id=\"create_new_div_box\">Click here to create div box</span>");
	$("#" + this.Editor_box_id).append("<div class=\"slide_inside_editor\" id=\"slide_inside_editor\"></div>");
	
	$("#create_new_div_box").click(function(){
		self.create_new_div_box();
	});
}

Editor.prototype.create_new_div_box = function(){
	var self = this ; 
	$("#" + self.Editor_box_id + " > ." + self.slide_class).append("<div style=\" left:" + self.new_div_box_left + "; " +
								"top:" + self.new_div_box_top + "; " + 
								"width:" + self.new_div_box_width  + "; " + 
								"height:" + self.new_div_box_height + "; " + 
								"position:absolute;" + "; " +
								"border:1px solid #000F0F" + "; " +
								"background:#FFFFCC" + "; " +
								"\" class=\"active_element\" id=\"div_box_id_" + self.div_box_number +"\">" +
								"<div id=\"div_box_id_" + self.div_box_number +"_html\" >Edit Me</div>" +
								"<textarea id=\"div_box_id_" + self.div_box_number +"_wiki\" >Edit Me</textarea>" +
								"</div>");
	
	$("#div_box_id_" + self.div_box_number).draggable({ 
	    opacity: 0.70,
	    stop: function (){
		//alert("done man" + this );
		var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ;
		var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ;
		$(this).css("left" , l);
		$(this).css("top" , t);
		}
	});
	$("#div_box_id_" + self.div_box_number ).resizable({ 
		 handles: "all", 
		 ghost: true,
		 stop: function (){
			//alert("done man" + this );
			var w = ( 100 * parseFloat($(this).css("width")) / parseFloat($(this).parent().css("width")) )+ "%" ;
			var h = ( 100 * parseFloat($(this).css("height")) / parseFloat($(this).parent().css("height")) )+ "%" ;
			var l = ( 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) )+ "%" ;
			var t = ( 100 * parseFloat($(this).css("top")) / parseFloat($(this).parent().css("height")) )+ "%" ;
			$(this).css("left" , l);
			$(this).css("top" , t);
			$(this).css("width" , w);
			$(this).css("height" , h);
			},
		 autoHide: true,
		 minWidth: 50,
		 minHeight: 50,
		 minTop: 50,
		 minLeft: 50,
		 dragHandle: true
		
	});
	
	$("#div_box_id_" + self.div_box_number).dblclick(function(){
		var id = $(this).attr("id");
		$("#" + id + "_html").hide();
		
		$("#" + id + "_wiki").show();
		
		$("#" + id + "_wiki").attr("value" , Wiky.toWiki( $("#" + id + "_html").html() ) );
	});
	///*
	$("#div_box_id_" + self.div_box_number + "_wiki").mouseout(function(){
		
		var id = $(this).parent().attr("id");
		$("#" + id + "_html").show();
		$("#" + id + "_wiki").hide();
		$("#" + id + "_html").html( Wiky.toHtml( $("#" + id + "_wiki").attr("value") ) );
	});
	//*/
	
	$("#div_box_id_" + self.div_box_number + "_html").show();
	$("#div_box_id_" + self.div_box_number + "_wiki").hide();
	
	
	self.div_box_number = self.div_box_number + 1 ;
	
	
	
	
}

